<template>
  <div class="app-container home">
    <div class="mapView">
      <div ref="mapView" style="width:100%" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'Index',
  data() {
    return {
      data: [{ id: 1, name: '沧州聚农智能农业有限公司', lat: 38.591385, lng: 116.816296, address: '' }]
    }
  },
  mounted() {
    this.initMap(38.591385, 116.816296, this.data)
  },
  methods: {
    initMap(lat = 39.387260, lng = 116.731030, marker) {
      const center = new window.TMap.LatLng(lat, lng)
      const container = this.$refs.mapView
      container.innerHTML = ''
      const map = new window.TMap.Map(container, {
        center: center, // 设置地图中心点坐标
        zoom: 10, // 设置地图缩放级别
        baseMap: { // 设置卫星地图
          type: 'satellite'
        }
      })
      // 初始marker
      var markers = new TMap.MultiMarker({
        id: 'marker-layer',
        map: map,
        styles: {
          'marker': new TMap.MarkerStyle({
            'width': 24,
            'height': 35,
            'anchor': { x: 12, y: 35 }
          })
        },
        geometries: marker.map((item, idx) => {
          const info = {
            'id': item.id,
            'styleId': 'marker',
            'position': new TMap.LatLng(item.lat, item.lng),
            'properties': {
              'title': item.name
            }
          }
          return info
        })
      })
      // 初始化infoWindow
      const infoWindow = new TMap.InfoWindow({
        map: map,
        position: new TMap.LatLng(39.478429, 116.674118),
        offset: { x: 0, y: -32 } // 设置信息窗相对position偏移像素
      })
      infoWindow.open()
      infoWindow.setPosition(new TMap.LatLng(marker[0].lat, marker[0].lng))
      infoWindow.setContent(`<div style="font-size:14px;font-weight:900;color:#333;padding-right:100px;">${marker[0].name}</div>`)
    }
  }
}
</script>

<style scoped lang="scss">
</style>

